<template>
  <div>
    <div class="tabbar_content">
      <router-view></router-view>
    </div>
    <van-tabbar v-model="active" route active-color="red">
      <van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/category" icon="orders-o"
        >分类</van-tabbar-item
      >
      <van-tabbar-item replace to="/deserve" icon="fire-o"
        >值得买</van-tabbar-item
      >
      <van-tabbar-item replace to="/shopcart" icon="shopping-cart-o"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item replace to="/center" icon="manager-o"
        >个人</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Tabbar",
});
</script>

<script lang="ts" setup>
import { ref } from "vue";
const active = ref(0);
</script>

<style lang="less" scoped></style>
